<template>
  <!-- 购买或者加入购物车的时候选择商品的种类 -->
  <u-popup
    mode="bottom"
    v-model="showTimePopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <view class="popup-title"> 送达时间 </view>
      <view class="time-section">
        <scroll-view class="time-picker-left" scroll-y>
          <view class="time-month-list">
            <view
              class="time-month-item"
              :class="active == index ? 'active' : ''"
              v-for="(item, index) in timeData"
              :key="index"
              @click="active = index"
              >{{ item.day }}[{{ item.week }}]</view
            >
          </view>
        </scroll-view>
        <scroll-view class="time-picker-right" scroll-y>
          <view class="time-day-list">
            <view
              class="time-day-item"
              :class="selectd == index ? 'selectd' : ''"
              v-for="(item, index) in timeData[active].times"
              :key="index"
              @click="selectd = index"
            >
              <view class="time">{{ item.time }}</view>
              <i class="iconfont icon-seleted"></i>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="close-icon" @click="showTimePopup = false">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="foot-btns">
        <view class="foot-content">
          <view class="confirm-btn" @click="handleConfirm">{{
            $t("list.confirm")
          }}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "",
  props: {
    day: {
      type: Number,
      default: 2,
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      showTimePopup: false,
      timeData: [],
      active: 0,
      selectd: 0,
    };
  },
  mounted() {},
  watch: {},
  filters: {},
  computed: {},
  methods: {
    showPopup() {
      this.showTimePopup = true;
      this.addDate();
    },
    addDate() {
      let date = new Date();
      let arr = [];
      for (let i = 0; i < this.day; i++) {
        arr.push({
          day: "",
          week: "",
          times: [],
        });
      }

      arr.forEach((d, index) => {
        let month = date.getMonth() + 1;
        let day = date.getDate() + index;
        let hours = date.getHours();
        let minutes = date.getMinutes();
        if (["1", "3", "5", "7", "8", "10", "12"].includes(month) && day > 31) {
          day = "01";
        }
        if (["4", "6", "9", "11"].includes(month) && day > 30) {
          day = "01";
        }
        if (["2"].includes(month) && day > 28) {
          day = "01";
        }
        d.day = `${month}${this.$t("user.month")}${day}${this.$t(
          "alipay.day"
        )}`;
        let weekDay = date.getDay();
        let weeks = new Array(
          this.$t("alipay.week1"),
          this.$t("alipay.week2"),
          this.$t("alipay.week3"),
          this.$t("alipay.week4"),
          this.$t("alipay.week5"),
          this.$t("alipay.week6"),
          this.$t("alipay.week7")
        );
        let weekNum = weekDay + index;
        if (weekNum > 6) {
          weekNum = 0;
        }
        d.week = weeks[weekNum];
        let hourStr = hours;
        let reduceTime = 0;
        if (index == 0) {
          reduceTime = minutes < 30 ? hours : hours + 1;
        }
        for (let i = 0; i < (24 - reduceTime) * 2; i++) {
          let obj = {
            time: "",
          };
          let str = "00";
          if (index == 0) {
            if (minutes < 30) {
              str = i % 2 == 0 ? "30" : "00";
              if (i % 2 == 1) hourStr = hourStr + 1;
            } else {
              str = i % 2 == 0 ? "00" : "30";
              if (i % 2 == 0) hourStr = hourStr + 1;
            }
            if (index == 0 && i == 0) {
              str = "立即配送";
            }
          } else {
            if (i == 0) hourStr = "00";
            str = i % 2 == 0 ? "00" : "30";
            hourStr = parseInt(i / 2);
          }
          obj.time = `${str == "立即配送" ? "" : hourStr}${
            str == "立即配送" ? str : "：" + str
          }`;
          d.times.push(obj);
          d.date = `${date.getFullYear()}-${month}-${day}`;
        }
      });
      this.timeData = arr;
    },
    closePopup() {
      this.showTimePopup = false;
    },
    handleConfirm() {
      this.$u.throttle(() => {
      this.$emit("selectEnd", {
        day: this.timeData[this.active].day,
        week: this.timeData[this.active].week,
        time: this.timeData[this.active].times[this.selectd].time,
        active: this.active,
        selectd: this.selectd,
        date: this.timeData[this.active].date,
      });
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  max-height: 80vh;
  position: relative;
  .popup-title {
    height: 96rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    display: flex;
    align-items: center;
    padding-left: 4.8vw;
  }

  .time-section {
    width: 100%;
    display: flex;
    align-items: flex-start;
    .time-picker-left {
      width: 232rpx;
      height: 60vh;
      overflow-y: auto;
      background: #f2f1f2;
      .time-month-item {
        width: 100%;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .active {
        background: #ffffff;
      }
    }
    .time-picker-right {
      flex: 1;
      height: 60vh;
      overflow-y: scroll;
      overflow-x: hidden;
      .time-day-list {
        width: 100%;
        padding: 0 36rpx;
        .time-day-item {
          width: 100%;
          height: 96rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #f2f2f2;
          .time {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #262626;
          }
          .iconfont {
            color: #f0250e;
            font-weight: bold;
            opacity: 0;
            font-size: 36rpx;
          }
        }
        .selectd {
          .time {
            color: #f0250e;
          }
          .iconfont {
            opacity: 1;
          }
        }
      }
    }
  }

  .close-icon {
    width: 12.78vw;
    height: 96rpx;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      color: #262626;
      font-weight: 600;
      font-size: 36rpx;
    }
  }

  .foot-btns {
    width: 100%;
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 13.34vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .confirm-btn {
        width: 90.4vw;
        height: 10.134vw;
        border-radius: 5.067vw;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
}
</style>
